<template>
	<view class="j-search" :class="searchClass" :style="searchStyle">
		<!-- 原生搜索框 -->
		<view class="search-container">
			<view class="search-input-wrapper" @click="handleSearchClick">
				<text class="search-icon iconfont icon-search"></text>
				<input
					class="search-input"
					type="text"
					:placeholder="placeholder"
					:value="searchValue"
					:readonly="disabled"
					:maxlength="maxlength"
					@input="handleInput"
					@focus="handleFocus"
					@blur="handleBlur"
					@confirm="handleSearch"
					@click="handleInputClick"
				/>
				<text v-if="searchValue && clearEnabled" class="clear-icon" @click.stop="handleClear">×</text>
			</view>

			<!-- 搜索按钮 -->
			<view v-if="showAction" class="search-btn" @click="handleSearch">
				<text>{{ actionText }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'JSearch',
	props: {
		// 基础属性
		value: {
			type: String,
			default: ''
		},
		placeholder: {
			type: String,
			default: '搜索商品'
		},
		disabled: {
			type: Boolean,
			default: false
		},
		maxlength: {
			type: [String, Number],
			default: 50
		},

		// 显示控制
		showAction: {
			type: Boolean,
			default: false
		},
		actionText: {
			type: String,
			default: '搜索'
		},
		clearEnabled: {
			type: Boolean,
			default: true
		},

		// 自定义样式
		searchClass: {
			type: String,
			default: ''
		},
		searchStyle: {
			type: [String, Object],
			default: ''
		}
	},

	data() {
		return {
			searchValue: this.value
		};
	},

	computed: {
		// 计算属性可以在这里添加
	},

	watch: {
		value: {
			handler(newVal) {
				this.searchValue = newVal;
			},
			immediate: true
		},

		searchValue: {
			handler(newVal) {
				this.$emit('input', newVal);
			}
		}
	},

	methods: {
		// 搜索事件
		handleSearch() {
			if (this.searchValue.trim()) {
				this.$emit('search', this.searchValue);
			}
		},

		// 输入事件
		handleInput(e) {
			this.searchValue = e.detail.value;
			this.$emit('input', this.searchValue);
		},

		// 聚焦事件
		handleFocus() {
			this.$emit('focus');
		},

		// 失焦事件
		handleBlur() {
			this.$emit('blur');
		},

		// 清除事件
		handleClear() {
			this.searchValue = '';
			this.$emit('clear');
		},

		// 搜索框点击事件
		handleSearchClick() {
			this.$emit('searchClick');
		},

		// 输入框点击事件
		handleInputClick() {
			// 输入框点击时不阻止事件传播，让父级的handleSearchClick处理
			this.$emit('searchClick');
		}
	}
};
</script>

<style lang="less" scoped>
.j-search {
	position: relative;

	.search-container {
		display: flex;
		align-items: center;
		background: #f8f9fa;
		border-radius: 999rpx;
		padding: 0 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		position: relative;
		&:focus-within {
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
			background: #fff;
		}
	}

	.search-input-wrapper {
		display: flex;
		align-items: center;
		flex: 1;
		position: relative;

		.search-icon {
			font-size: 36rpx;
			color: #999;
			margin-right: 15rpx;
		}

		.search-input {
			flex: 1;
			height: 70rpx;
			border: none;
			outline: none;
			background: transparent;
			font-size: 28rpx;
			color: #333;

			&::placeholder {
				color: #999;
			}

			&[readonly] {
				cursor: pointer;
				color: #999;
			}
		}

		.clear-icon {
			font-size: 36rpx;
			color: #ccc;
			padding: 10rpx;
			cursor: pointer;
			transition: color 0.2s;

			&:hover {
				color: #999;
			}
		}
	}

	.search-btn {
		position: absolute;
		right: 0;
		top: 0;
		background: #007aff;
		color: #fff;
		height: 100%;
		padding: 0rpx 30rpx;
		border-radius: 20rpx 999rpx 999rpx 20rpx;
		font-size: 28rpx;
		margin-left: 20rpx;
		transition: all 0.3s ease;
		cursor: pointer;
		disflay: flex;
		align-items: center;
		justify-content: center;
		.bor();
		&:active {
			transform: scale(0.95);
			background: #0056cc;
		}
	}
}
</style>
